<template>
	<div>
		<div class="yr"> 
			<YRCardTitle title="温其如玉"></YRCardTitle>
			<div class="poetry-list">
				<Row v-for="(arr,index) in articleList" :key="index">
					<div class="row">
						<i-Col span="8" v-for="(item,i) in arr" :key="i">
							<div class="data" @click="toDetail(item)">
								<div class="img" :style="{backgroundImage:'url('+item.cover+')'}">
								</div>
								<div class="img-cover">
									<h1 class="title">{{item.title}} </h1>
									<div class="content">
										<p class="poetry-desc">{{item.description}}</p>
										<div class="tags">
											<time class="bot"> {{item.createTime|dateformatDate}}</time>
											<span class="bot">{{item.author}}</span>
										</div>
									</div>
								</div>
							</div>
						</i-Col> 
						<div class="banlf"></div>
					</div>
				</Row>
				<Spin size="large" fix v-if="spinShow"></Spin>
			</div>
		</div>
		<div class="page">
			<Page :total="param.total" :current="param.current" :page-size="param.size" @on-change="getArticlePage"/>
		</div>
	</div>
</template>

<script>
import YRCardTitle from '@/components/common/YRCardTitle.vue'
export default {
  name: 'PoetryList',
  components:{
	YRCardTitle
  },
  props: {
	title:String
  },
  data:()=>{
	return{
		param:{
			current:1,
			size:9,
			total:0,
			params:{
				type:3
			}
		},
		articleList:[],
		showContent:false,
		spinShow:false,//加载中
	}  
  },
  methods:{
	getArticlePage(current){
		this.param.current=current||1;
		this.spinShow = true;
		this.$http.post("/api/article/getArticlePage",this.param).then(res=>{
			console.log(res)
			this.articleList = this.arrSplit(res.records,3)
			console.log(this.articleList)
			this.param.total  = res.total;
			this.spinShow = false;
		})
	},
	toDetail(item){
		this.$router.push({path:'/poetry/poetryContent/',query:{id:item.id}});
	},
	//拆二维数组
	arrSplit(arr,len) {
		//获取要切割的数组的长度
		var length= arr.length;
		//如果长度小于要划分的长度，返回原数组
		if (len <= 1 || length < len)
			return [arr];
		var groups = []; 
		//拆分成的二维数组的个数
		var number= Math.ceil(length / len);
		//用slice方法，每四个截取一次
		for (var i = 0; i < number; i++)
			groups.push(arr.slice(len * i, len * (i + 1)));
		return groups;
	}
  },
  created(){
	this.getArticlePage();
  },
  computed:{
  }
}
</script>

<style scoped="scoped" lang="stylus">
.ivu-row
	padding-bottom 30px
.yr
	box-shadow 0 0 0 1px rgba(0,0,0,.02), 0 4px 10px rgba(0,0,0,.06)
	border-radius 10px 
.poetry-list
	padding 20px
	padding-bottom 0px
	background #fff
	border-radius 0 0 10px 10px 
	position relative
	min-height 60vh
	.data:hover .title
		transform: translateY(-30px) scale(1.2);
		opacity 1
	.data:hover .content
		display block!important
	.data:hover .img
		transform: scale(1.2);
		filter: blur(3px);
	.row
		.data
			overflow hidden
			width 160px
			height 200px
			position: relative;
			box-shadow: 0 0 1px 1px rgba(0,0,0,.1), 2px 0 2px rgba(0,0,0,.17);
			border-radius: 5px;
			margin 0 auto
			transition: all .2s;
			cursor pointer
			.img
				background: url(http://lang.sliver.fun/dbblog/20190831/2de3bf940b2d45f4a0259b0554aaa3b5.jpg)
				background-size cover
				background-position center
				background-repeat no-repeat
				width 100%
				height 100%
				transition: all .2s;
			.img-cover
				position: absolute;
				width 100%
				height 100%
				top 0px
				left 0px
				z-index 99
				background-color: rgba(0,0,0,.08);
				color: #fff!important;
				-webkit-transition: all .3s;
				transition: all .3s;
				.title
					text-align: center;
					text-shadow: 0 0 3px #fff;
					color #fff
					font-family: inherit;
					font-weight: 500;
					white-space: nowrap;
					font-size: 18px;
					padding-top 75px
					transition: all .2s;
				.content
					position absolute
					bottom 0px
					width 100%
					padding 5px 5px 0px
					display none
					text-shadow: 0 0 3px #fff;
					transition: all .9s;
					.poetry-desc
						padding-bottom 2px
						width 100%
						text-align: left;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
					.tags
						display flex
						justify-content space-between
		.banlf
			position: absolute;
			left: -30px;
			bottom: 20px
			width: calc(100% + 60px) ;
			height: 8px;
			background: #fff;
			border: 1px solid #ededed;
			border-bottom: 1px solid #cdcdcd;
			z-index: 5;
.page
	width 100%
	text-align center
	padding-top 15px
</style>
